<template>
  <a-modal
    title="子系统配置"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    style="top:20px;"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item label="系统简称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['title', validatorRules.title]" placeholder="请输入系统简称(不超过七个字)"></a-input>
        </a-form-item>
        <a-form-item label="系统图标" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-image-upload class="avatar-uploader" text="上传" v-model="fileList"></j-image-upload>
        </a-form-item>
        <a-form-item label="系统Logo" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-image-upload class="avatar-uploader" text="上传" v-model="icoFileList"></j-image-upload>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { editSysCustomConfig, getSysCustomConfig } from '../../../sysConfig/sysCustom/service.js'
import { apiUrl } from '@/api/api.js'
import pick from 'lodash.pick';

  export default {
    name: 'SysChildAppModal',
    data () {
      return {
        visible: false,
        confirmLoading: false,
        confirmDirty: false,
        appId: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        form: this.$form.createForm(this),
        validatorRules: {
          title: { rules: [{ required: true, message: '请输入平台简称' }, { min: 1, max: 7, message: '长度在 1 到 7 个字符', trigger: 'blur' }] }
        },
        url: {
          fileUpload: apiUrl.fileUpload
        },
        fileList: '',
        icoFileList: '',
        model: {}
      }
    },
    created () {
      console.log('created');
    },

    methods: {
      show (tenantId, appId) {
        let that = this;
        that.appId = appId;
        let params = {
          appId: appId,
          authFlag: 0
        };
        getSysCustomConfig(tenantId, params)
          .then(res => {
            // 请求成功
            if (res.success) {
              this.model = res.result;
              this.edit(res.result);
              this.visible = true;
            } else {
              // 请求失败
              this.$message.warning(res.message);
            }
          })
          .finally(() => {
            that.confirmLoading = false;
          })
      },
      edit(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.$nextTick(() => {
          setTimeout(() => {
            this.form.setFieldsValue(pick(this.model, 'title'));
            this.fileList = this.model.iconUrl;
            this.icoFileList = this.model.icoUrl;
          }, 5)
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
      },
      handleSubmit () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            this.confirmLoading = true;
            let formData = Object.assign(this.model, values);
            if (that.fileList !== '') {
              formData.iconUrl = that.fileList;
            } else {
              formData.iconUrl = null;
            }
            if (that.icoFileList !== '') {
              formData.icoUrl = that.icoFileList;
            } else {
              formData.icoUrl = null;
            }
            formData.authFlag = 0;
            formData.appId = that.appId;
            editSysCustomConfig(formData)
              .then(res => {
                if (res.success) {
                  this.$message.success(res.message);
                  this.$emit('ok');
                } else {
                  that.$message.warning(res.message);
                }
              })
              .finally(() => {
                that.confirmLoading = false;
                this.close();
              })
          }
        })
      },
      handleCancel () {
        this.close();
      }
    }
  }
</script>
